
<template>
<div style="position: relative">
  <div v-if="type === 0">
    <div class="flex">
      <zSelect :value.sync="query.customerIds" @change="removeSelect" url="api/dropDown/basCustomerList"  style="width: 100%;"/>
      <el-button @click="onGet">
        查询
      </el-button>
    </div>
    <div style="height: 10px"></div>
    <el-table ref="table" :data="dataList" style="width: 100%" height="500"  @selection-change="handleSelectionChange" border >
      <el-table-column type="selection" width="60" />
      <el-table-column  type="index" width="60" label="序号"/>
      <el-table-column prop="busDate" label="业务日期" />
      <el-table-column prop="closeTime" label="发货时间" />
      <el-table-column prop="code" label="回单编码" />
      <el-table-column prop="customerName" label="客户名称" />
      <el-table-column prop="slipDate" label="回单日期" />
      <el-table-column prop="slipTaxAmount" label="回单金额" />
      <el-table-column prop="sourceCode" label="来源单据号" />
    </el-table>
    <div class="block">
      <el-pagination
        :current-size.sync="query.size"
        :page-sizes="[10, 20, 50, 100]"
        :current-page.sync="query.page"
        @size-change="setSize"
        @current-change="setPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <div class="flex" style="justify-content: right">
      <el-button type="primary" @click="close">取消</el-button>
      <el-button type="primary" @click="tab">确认</el-button>
    </div>
  </div>
  <div v-if="type === 1">
    <el-table ref="table" :data="selectList" height="500" border >
      <el-table-column  type="index" width="60" label="序号"/>
      <el-table-column prop="customerName" label="客户名称" />
      <el-table-column prop="sourceCode" label="销售单编码" />
      <el-table-column prop="taxAmount" label="金额" />
      <el-table-column label="回单日期" >
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.slipDate"
            align="right"
            unlink-panels
            class="fl1"
            format="yyyy - MM - dd "
            value-format="yyyy-MM-dd"
            range-separator=""
            placeholder="回单日期"
          />
        </template>
      </el-table-column>
      <el-table-column label="回单编号" >
        <template slot-scope="scope">
          <el-input v-model="scope.row.code"/>
        </template>
      </el-table-column>
      <el-table-column label="回单金额" >
        <template slot-scope="scope">
          <el-input type="number" v-model="scope.row.slipTaxAmount"/>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div>
            <el-button type="text" @click="splitBill(scope.row,scope.$index)">拆分</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex" style="justify-content: right">
      <el-button type="primary" @click="close">取消</el-button>
      <el-button type="primary" @click="save">确认</el-button>
    </div>
  </div>
</div>
</template>

<script>
import {customerSlipDraw, customerSlipDrawAdd} from "@/api/erp/customerReturnBill";

export default{
  name:'customerReturnBillAdd',
    data(){
      return {
        dataList:[],
        query:{
          customerIds:'',
          page:1,
          size:20
        },
        selectList:[],
        total:0,
        type:0
      }
    },
    created(){

    },
    methods:{
      removeSelect(){
        this.selectList = []
      },
      tab(){
        if(this.selectList.length){
          this.type = 1
        }else{
          this.$message.error('请先选择订单')
        }
      },
      //选中的数据添加到selectList
      handleSelectionChange(val){
        this.selectList = val
      },
      close(){
        this.$emit("hide")
      },
      async save(){
        if(!this.selectList.every((item,index)=>item.code && item.slipTaxAmount)){
          return this.$message.error('请填写回单编号和回单金额')
        }
        //如果回单金额不等于订单金额则弹框提示回单金额和订单金额不一致是否保存
        if(!this.selectList.every((item,index)=> {

          console.log(item.slipTaxAmount == item.taxAmount)
          return item.slipTaxAmount == item.taxAmount
        })){
            const that = this
            this.$confirm('回单金额和订单金额不一致是否保存？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(async function () {
              const res = await customerSlipDrawAdd(that.selectList)
              if(res.status === 200){
                that.$emit("refresh")
                that.close()
              }
            })
            return;
        }
        const res = await customerSlipDrawAdd(this.selectList)
        if(res.status === 200){
          this.$emit("refresh")
          this.close()
        }
      },
      splitBill(row,index){
        //复制当前行
        const copyRow = Object.assign({},row)
        copyRow.code = ""
        copyRow.slipTaxAmount = 0
        this.selectList.splice(index + 1,0,copyRow)
      },
      setPage(e){
        this.query.page = e
        this.onGet()
      },
      setSize(e){
        this.query.size = e
        this.onGet()
      },
      async onGet(e){
        if(!this.query.customerIds){
          return this.$message.error('请选择客户')
        }
        const res = await customerSlipDraw(this.query)
        if(res.status === 200){
          this.dataList = res.data.content
          this.total = res.data.totalElements
        }
      }
    }
}
</script>


<style scoped>

</style>
